import { Component, PropsWithChildren } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtIcon } from 'taro-ui'
import { AtList, AtListItem } from 'taro-ui'
import { getToBuy, getTypes, getAreaChoose } from '../../api/home'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      current: 0,
      userList: [],
      flag: false,
      navTitle: '房屋求购',
      typesList: [],
      chooseList: []
    }
  }
  componentWillMount() { }

  componentDidMount() {
    this.getTobuy()
    this.getHouseTypes()
    this.getAreaList()
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  getTobuy() {
    getToBuy().then((res) => {
      this.setState({
        userList: res.data.data
      })
    })
  }
  getHouseTypes() {
    getTypes().then((res) => {
      this.setState({
        typesList: res.data.data
      })
    })
  }
  getAreaList() {
    getAreaChoose().then((res) => {
      this.setState({
        chooseList: res.data.data
      })
    })
  }
  onClick() {
    Taro.navigateBack()
  }
  handleClick(index: number) {
    this.setState({
      current: index,
      flag: true,
      navTitle: index === 0 ? '房产类型' : '区域选择'
    })
  }
  goRelease() {
    Taro.switchTab({
      url: '/pages/release/index'
    })
  }
  render() {
    const tabList = [{ title: '房产类型 ▼' }, { title: '区域选择 ▼' }]
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>{this.state.navTitle}</Text>
          </View>
        </View>
        <View className='container'>
          <View className='type'>
            <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={this.state.current} index={0}>
                <View className={this.state.flag ? 'showbox' : 'showbox1'}>
                  {
                    this.state.typesList?.map((item: any) => {
                      return <View className='tit' key={item.id}>
                        {item.house0}
                      </View>
                    })
                  }
                </View>
              </AtTabsPane>
              <AtTabsPane current={this.state.current} index={1}>
                <View className={this.state.flag ? 'showbox' : 'showbox1'}>
                  {
                    this.state.chooseList?.map((item: any) => {
                      return <View className='tit' key={item.uid}>
                        {item.areaAddress}
                      </View>
                    })
                  }
                </View>
              </AtTabsPane>
            </AtTabs>
          </View>
          <View className='goodbox'>
            {
              this.state.userList?.map((item: any, index: number) => {
                return <View className='buyList' key={index}>
                  <AtList>
                    <AtListItem
                      title={item.user}
                      extraText={item.time}
                      thumb={item.img}
                    />
                    <View className='desc'>{item.desc}</View>
                    <View className='area'>
                      <View className='address'>意向区域: {item.address}
                        意向价格:
                        <Text>{item.price}</Text></View>
                      <View className='tel'>
                        <View className='icon1'>
                          <AtIcon value='message' size='24' color='#F00'></AtIcon>
                        </View>
                        <View className='icon2'>
                          <AtIcon value='phone' size='24' color='#F00'></AtIcon>
                        </View>
                      </View>
                    </View>
                  </AtList>
                </View>
              })
            }
          </View>
          <Button className='release' onClick={this.goRelease.bind(this)}>发布</Button>
        </View>
      </View >
    )
  }
}

